<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户信息</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Arial, sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
            background-attachment: fixed;
            padding: 20px;
            color: #e2e8f0;
            position: relative;
        }

        body.no-scroll {
            overflow: hidden;
        }

        /* 自定义滚动条样式 - Webkit浏览器 (Chrome, Safari, Edge) */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(30, 41, 59, 0.3);
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(99, 179, 237, 0.3);
            border-radius: 5px;
            transition: all 0.3s;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(99, 179, 237, 0.5);
        }

        ::-webkit-scrollbar-thumb:active {
            background: rgba(99, 179, 237, 0.7);
        }

        /* Firefox 滚动条样式 */
        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(99, 179, 237, 0.3) rgba(30, 41, 59, 0.3);
        }

        .content-wrapper {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 工具栏样式 */
        .toolbar {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            align-items: center;
            flex-wrap: wrap;
        }

        .search-box {
            flex: 1;
            min-width: 250px;
            position: relative;
        }

        .search-box input {
            width: 100%;
            padding: 11px 40px 11px 40px;
            background: #2d3748;
            border: 1px solid #3f4b5e;
            border-radius: 8px;
            color: #e2e8f0;
            font-size: 14px;
            transition: all 0.2s;
        }

        .search-box input:focus {
            outline: none;
            border-color: #4a90e2;
            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
        }

        .search-box input::placeholder {
            color: #64748b;
        }

        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            fill: #64748b;
            pointer-events: none;
        }

        .clear-search {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            padding: 2px;
            background: transparent;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .clear-search:hover {
            background: #3f4b5e;
        }

        .clear-search.visible {
            display: flex;
        }

        .clear-search svg {
            width: 16px;
            height: 16px;
            fill: #94a3b8;
        }

        /* 排序按钮组容器 */
        .sort-buttons {
            display: flex;
            gap: 6px;
            align-items: center;
            background: #2d3748;
            padding: 6px;
            border-radius: 8px;
            border: 1px solid #3f4b5e;
        }

        .sort-label {
            font-size: 13px;
            color: #cbd5e1;
            font-weight: 500;
            white-space: nowrap;
            padding: 0 6px;
        }

        .sort-btn {
            padding: 7px 14px;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 5px;
            color: #94a3b8;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 5px;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        .sort-btn:hover {
            background: #374151;
            border-color: #4b5563;
            color: #e2e8f0;
        }

        .sort-btn.active {
            background: #4a90e2 !important;
            border-color: #4a90e2 !important;
            color: white !important;
            box-shadow: 0 2px 4px rgba(74, 144, 226, 0.3) !important;
        }

        /* 确保激活状态在悬停时也保持 */
        .sort-btn.active:hover {
            background: #5ba3f5 !important;
            border-color: #5ba3f5 !important;
            color: white !important;
            box-shadow: 0 3px 6px rgba(74, 144, 226, 0.4) !important;
        }

        .sort-btn svg {
            width: 14px;
            height: 14px;
            fill: currentColor;
            pointer-events: none;
        }

        /* 排序方向按钮特殊样式 */
        .sort-btn[data-direction] {
            padding: 7px 10px;
            min-width: 36px;
            justify-content: center;
        }

        /* 刷新按钮特殊样式 */
        #refreshAllBtn {
            background: #10b981;
            border-color: #10b981;
            color: white;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
            transition: all 0.2s;
        }

        #refreshAllBtn:hover {
            background: #059669 !important;
            border-color: #059669 !important;
            color: white !important;
            box-shadow: 0 3px 6px rgba(16, 185, 129, 0.4) !important;
            transform: translateY(-1px);
        }

        #refreshAllBtn:active {
            transform: translateY(0);
            box-shadow: 0 1px 2px rgba(16, 185, 129, 0.3);
        }

        #refreshAllBtn svg {
            fill: white !important;
        }

        /* 统计模块样式 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
            margin-bottom: 20px;
        }

        .stat-card {
            background: #2d3748;
            border: 1px solid #3f4b5e;
            border-radius: 8px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.2s;
            cursor: pointer;
            user-select: none;
        }

        .stat-card:hover {
            border-color: #4a90e2;
            transform: translateY(-2px);
        }

        .stat-card.active {
            border-color: #3b82f6;
            background: rgba(59, 130, 246, 0.1);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }

        .stat-card.clickable:active {
            transform: translateY(0);
        }

        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .stat-icon svg {
            width: 20px;
            height: 20px;
            fill: white;
        }

        .stat-icon.total {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .stat-icon.active {
            background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        }

        .stat-icon.banned {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        }

        .stat-icon.balance {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }

        .stat-icon.displayed {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        }

        .stat-content {
            flex: 1;
            min-width: 0;
        }

        .stat-value {
            font-size: 20px;
            font-weight: 700;
            color: #e2e8f0;
            line-height: 1.2;
        }

        .stat-label {
            font-size: 11px;
            color: #94a3b8;
            margin-top: 2px;
        }

        .cards-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .card {
            background: linear-gradient(135deg, #2d3748 0%, #1e293b 100%);
            border: 1px solid rgba(99, 179, 237, 0.2);
            border-radius: 12px;
            padding: 14px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: visible;
            min-height: 160px;
            box-shadow:
                0 2px 4px -1px rgba(0, 0, 0, 0.3),
                0 1px 2px -1px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
        }

        .card:hover {
            border-color: rgba(99, 179, 237, 0.5);
            transform: translateY(-2px);
            box-shadow:
                0 8px 16px -4px rgba(0, 0, 0, 0.4),
                0 4px 8px -4px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(99, 179, 237, 0.3),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
        }

        .card.active {
            border-color: rgba(59, 130, 246, 0.6);
            box-shadow:
                0 4px 8px -2px rgba(59, 130, 246, 0.3),
                0 2px 4px -2px rgba(59, 130, 246, 0.2),
                0 0 0 2px rgba(59, 130, 246, 0.2),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
        }

        /* 加载动画样式 */
        .loading-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            gap: 20px;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #3f4b5e;
            border-top-color: #4a90e2;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .loading-text {
            font-size: 16px;
            color: #94a3b8;
        }

        /* 隐藏加载动画 */
        .loading-container.hidden {
            display: none;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 10px;
        }

        .card-title {
            font-size: 14px;
            font-weight: 600;
            color: #f1f5f9;
            line-height: 1.3;
            letter-spacing: -0.01em;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .status-badge {
            font-size: 10px;
            padding: 4px 10px;
            border-radius: 6px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            white-space: nowrap;
            font-weight: 600;
            box-shadow:
                0 1px 3px rgba(16, 185, 129, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .status-badge.warning {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            box-shadow:
                0 1px 3px rgba(239, 68, 68, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .card-time {
            font-size: 11px;
            color: #64748b;
            margin-bottom: 12px;
        }

        .card-email {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 12px;
            font-size: 11px;
            background: rgba(30, 41, 59, 0.6);
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid rgba(99, 179, 237, 0.2);
            backdrop-filter: blur(10px);
            transition: all 0.2s;
        }

        .card-email:hover {
            border-color: rgba(99, 179, 237, 0.4);
            background: rgba(30, 41, 59, 0.8);
        }

        .email-icon {
            width: 14px;
            height: 14px;
            stroke: #60a5fa;
            fill: none;
            filter: drop-shadow(0 1px 2px rgba(96, 165, 250, 0.3));
        }

        .email-text {
            color: #93c5fd;
            font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
            font-size: 10px;
            font-weight: 500;
        }

        .copy-btn {
            width: 14px;
            height: 14px;
            cursor: pointer;
            opacity: 0.5;
            transition: all 0.2s;
            fill: #94a3b8;
        }

        .copy-btn:hover {
            opacity: 1;
            fill: #60a5fa;
            transform: scale(1.1);
        }

        .card-info {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
        }

        .expire-badge {
            font-size: 10px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 6px;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
            white-space: nowrap;
            box-shadow:
                0 1px 3px rgba(245, 158, 11, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .balance-text {
            font-size: 12px;
            font-weight: 700;
            color: #34d399;
            white-space: nowrap;
            text-shadow: 0 0 6px rgba(52, 211, 153, 0.4);
            letter-spacing: 0.02em;
        }

        .view-icon {
            width: 16px;
            height: 16px;
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.2s;
            fill: #8b5cf6;
            margin-left: auto;
        }

        .view-icon:hover {
            opacity: 1;
        }

        .card-actions {
            display: flex;
            gap: 8px;
            padding-top: 12px;
            border-top: 1px solid rgba(99, 179, 237, 0.15);
        }

        .action-btn {
            width: 34px;
            height: 34px;
            border: none;
            border-radius: 8px;
            background: rgba(55, 65, 81, 0.6);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 0;
            border: 1px solid rgba(99, 179, 237, 0.1);
            backdrop-filter: blur(10px);
        }

        .action-btn:hover {
            background: rgba(75, 85, 99, 0.8);
            transform: translateY(-2px);
            border-color: rgba(99, 179, 237, 0.3);
        }

        .action-btn:active {
            transform: translateY(0);
        }

        .action-btn svg {
            width: 16px;
            height: 16px;
            stroke: #9ca3af;
            fill: none;
            transition: all 0.2s;
        }

        .action-btn.primary:hover {
            background: rgba(59, 130, 246, 0.2);
            box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
        }

        .action-btn.primary svg {
            stroke: #60a5fa;
        }

        .action-btn.primary:hover svg {
            stroke: #93c5fd;
            filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.5));
        }

        .action-btn.danger:hover {
            background: rgba(239, 68, 68, 0.2);
            box-shadow: 0 3px 10px rgba(239, 68, 68, 0.3);
        }

        .action-btn.danger svg {
            stroke: #ef4444;
        }

        .action-btn.danger:hover svg {
            stroke: #f87171;
            filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.5));
        }

        .action-btn.success:hover {
            background: rgba(34, 197, 94, 0.2);
            box-shadow: 0 3px 10px rgba(34, 197, 94, 0.3);
        }

        .action-btn.success svg {
            stroke: #22c55e;
        }

        .action-btn.success:hover svg {
            stroke: #4ade80;
            filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.5));
        }

        .action-btn.warning svg {
            stroke: #f59e0b;
        }

        /* 加载遮罩 */
        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .loading-overlay.active {
            display: flex;
        }

        .loading-content {
            background: #2d3748;
            padding: 30px 40px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #3f4b5e;
            border-top-color: #10b981;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .loading-text {
            color: #e2e8f0;
            font-size: 16px;
            font-weight: 500;
        }

        /* 确认对话框 */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10000;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal-overlay.active {
            display: flex;
            opacity: 1;
        }

        .modal-overlay.closing {
            opacity: 0;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        .modal-content {
            background: #2d3748;
            border-radius: 12px;
            padding: 0;
            max-width: 450px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            transform: translateY(0);
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .modal-overlay:not(.active) .modal-content {
            transform: translateY(-50px);
            opacity: 0;
        }

        .modal-overlay.active .modal-content {
            transform: translateY(0);
            opacity: 1;
        }

        @keyframes slideIn {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes slideOut {
            from {
                transform: translateY(0);
                opacity: 1;
            }
            to {
                transform: translateY(-50px);
                opacity: 0;
            }
        }

        .modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid #3f4b5e;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .modal-icon {
            width: 24px;
            height: 24px;
            fill: #ef4444;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #e2e8f0;
            flex: 1;
        }

        .modal-body {
            padding: 24px;
        }

        .modal-message {
            color: #cbd5e1;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 16px;
        }

        .modal-info {
            background: #1e293b;
            padding: 12px 16px;
            border-radius: 8px;
            border-left: 3px solid #ef4444;
        }

        .modal-info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 13px;
        }

        .modal-info-item:last-child {
            margin-bottom: 0;
        }

        .modal-info-label {
            color: #94a3b8;
        }

        .modal-info-value {
            color: #e2e8f0;
            font-weight: 500;
        }

        .modal-warning {
            margin-top: 16px;
            padding: 12px;
            background: rgba(239, 68, 68, 0.1);
            border-radius: 6px;
            color: #fca5a5;
            font-size: 13px;
            text-align: center;
        }

        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid #3f4b5e;
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        .modal-btn {
            padding: 10px 24px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .modal-btn-cancel {
            background: #3f4b5e;
            color: #e2e8f0;
        }

        .modal-btn-cancel:hover {
            background: #4b5563;
        }

        .modal-btn-confirm {
            background: #ef4444;
            color: white;
        }

        .modal-btn-confirm:hover {
            background: #dc2626;
        }

        /* 设置对话框特定样式 */
        .settings-group {
            margin-bottom: 20px;
        }

        .settings-label {
            display: block;
            margin-bottom: 12px;
        }

        .label-text {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: #e2e8f0;
            margin-bottom: 4px;
        }

        .label-hint {
            display: block;
            font-size: 12px;
            color: #94a3b8;
        }

        .input-group {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        .settings-input {
            flex: 1;
            padding: 10px 12px;
            background: #1e293b;
            border: 1px solid #3f4b5e;
            border-radius: 6px;
            color: #e2e8f0;
            font-size: 14px;
            transition: all 0.2s;
            -moz-appearance: textfield; /* Firefox */
        }

        /* 隐藏 Chrome/Safari/Edge 的数字输入框箭头 */
        .settings-input::-webkit-outer-spin-button,
        .settings-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .settings-input:focus {
            outline: none;
            border-color: #3b82f6;
            background: #0f172a;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .input-suffix {
            color: #94a3b8;
            font-size: 14px;
        }

        .settings-presets {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .preset-btn {
            padding: 6px 12px;
            background: #3f4b5e;
            border: 1px solid #4b5563;
            border-radius: 4px;
            color: #e2e8f0;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .preset-btn:hover {
            background: #4b5563;
            border-color: #3b82f6;
        }

        .preset-btn:active {
            transform: scale(0.95);
        }

        /* 按钮加载状态 */
        .sort-btn.loading,
        .action-btn.loading {
            opacity: 0.6;
            pointer-events: none;
            position: relative;
        }

        .sort-btn.loading svg,
        .action-btn.loading svg {
            animation: spin 1s linear infinite;
        }
    </style>
</head>
<body>
    <!-- 加载遮罩 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-content">
            <div class="spinner"></div>
            <div class="loading-text" id="loadingText">正在刷新...</div>
        </div>
    </div>

    <!-- 确认对话框 -->
    <div class="modal-overlay" id="confirmModal">
        <div class="modal-content">
            <div class="modal-header">
                <svg class="modal-icon" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                </svg>
                <div class="modal-title">确认删除</div>
            </div>
            <div class="modal-body">
                <div class="modal-message">
                    您确定要删除此账户吗？
                </div>
                <div class="modal-info" id="modalInfo">
                    <!-- 动态填充账户信息 -->
                </div>
                <div class="modal-warning">
                    ⚠️ 此操作不可恢复，请谨慎操作！
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-btn modal-btn-cancel" onclick="closeConfirmModal()">取消</button>
                <button class="modal-btn modal-btn-confirm" id="confirmDeleteBtn" onclick="confirmDelete()">确认删除</button>
            </div>
        </div>
    </div>

    <!-- 设置对话框 -->
    <div class="modal-overlay" id="settingsModal">
        <div class="modal-content">
            <div class="modal-header">
                <svg class="modal-icon" viewBox="0 0 24 24">
                    <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
                </svg>
                <div class="modal-title">设置</div>
            </div>
            <div class="modal-body">
                <div class="settings-group">
                    <label class="settings-label">
                        <span class="label-text">倒计时时间（秒）</span>
                        <span class="label-hint">设置状态栏自动刷新的倒计时时间</span>
                    </label>
                    <div class="input-group">
                        <input type="number" id="countdownInput" class="settings-input" min="10" max="3600" step="10" value="300" />
                        <span class="input-suffix">秒</span>
                    </div>
                    <div class="settings-presets">
                        <button class="preset-btn" onclick="setCountdown(60)">1分钟</button>
                        <button class="preset-btn" onclick="setCountdown(300)">5分钟</button>
                        <button class="preset-btn" onclick="setCountdown(600)">10分钟</button>
                        <button class="preset-btn" onclick="setCountdown(1800)">30分钟</button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-btn modal-btn-cancel" onclick="closeSettingsModal()">取消</button>
                <button class="modal-btn modal-btn-confirm" onclick="saveSettings()">保存</button>
            </div>
        </div>
    </div>

    <!-- 加载动画 -->
    <div class="loading-container" id="loadingContainer">
        <div class="loading-spinner"></div>
        <div class="loading-text">加载账户信息中...</div>
    </div>

    <!-- 内容区域 -->
    <div class="content-wrapper" id="contentWrapper" style="display: none;">
        <!-- 工具栏 -->
        <div class="toolbar">
            <!-- 搜索框 -->
            <div class="search-box">
                <svg class="search-icon" viewBox="0 0 24 24">
                    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                </svg>
                <input type="text" id="searchInput" placeholder="搜索邮箱..." />
                <button class="clear-search" id="clearSearch" title="清除搜索">
                    <svg viewBox="0 0 24 24">
                        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                    </svg>
                </button>
            </div>

            <!-- 排序按钮 -->
            <div class="sort-buttons">
                <span class="sort-label">排序:</span>
                <button class="sort-btn" id="sortByExpiry" data-sort="expiry">
                    <svg viewBox="0 0 24 24">
                        <path d="M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z"/>
                    </svg>
                    过期时间
                </button>
                <button class="sort-btn" id="sortByBalance" data-sort="balance">
                    <svg viewBox="0 0 24 24">
                        <path d="M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z"/>
                    </svg>
                    剩余余额
                </button>
                <button class="sort-btn" id="sortDirection" data-direction="desc" title="切换排序方向">
                    <svg viewBox="0 0 24 24">
                        <path d="M7 10l5 5 5-5z"/>
                    </svg>
                </button>
            </div>

            <!-- 刷新按钮 -->
            <button class="sort-btn" id="refreshAllBtn" title="并发刷新所有账户信息">
                <svg viewBox="0 0 24 24">
                    <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
                </svg>
                刷新全部
            </button>

            <!-- 设置按钮 -->
            <button class="sort-btn" id="settingsBtn" title="设置">
                <svg viewBox="0 0 24 24">
                    <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
                </svg>
                设置
            </button>
        </div>

        <!-- 统计模块 -->
        <div class="stats-container">
            <div class="stat-card clickable" id="statCardTotal" data-filter="all" onclick="handleStatCardClick('all')">
                <div class="stat-icon total">
                    <svg viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                    </svg>
                </div>
                <div class="stat-content">
                    <div class="stat-value" id="statTotal">0</div>
                    <div class="stat-label">总账户数</div>
                </div>
            </div>

            <div class="stat-card clickable" id="statCardActive" data-filter="ACTIVE" onclick="handleStatCardClick('ACTIVE')">
                <div class="stat-icon active">
                    <svg viewBox="0 0 24 24">
                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                    </svg>
                </div>
                <div class="stat-content">
                    <div class="stat-value" id="statActive">0</div>
                    <div class="stat-label">正常账户</div>
                </div>
            </div>

            <div class="stat-card clickable" id="statCardBanned" data-filter="BANNED" onclick="handleStatCardClick('BANNED')">
                <div class="stat-icon banned">
                    <svg viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/>
                    </svg>
                </div>
                <div class="stat-content">
                    <div class="stat-value" id="statBanned">0</div>
                    <div class="stat-label">已禁用</div>
                </div>
            </div>

            <div class="stat-card" id="statCardBalance">
                <div class="stat-icon balance">
                    <svg viewBox="0 0 24 24">
                        <path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/>
                    </svg>
                </div>
                <div class="stat-content">
                    <div class="stat-value" id="statBalance">0</div>
                    <div class="stat-label">总余额(仅正常)</div>
                </div>
            </div>

            <div class="stat-card" id="statCardDisplayed">
                <div class="stat-icon displayed">
                    <svg viewBox="0 0 24 24">
                        <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                    </svg>
                </div>
                <div class="stat-content">
                    <div class="stat-value" id="statDisplayed">0</div>
                    <div class="stat-label">当前显示</div>
                </div>
            </div>
        </div>

        <!-- 卡片容器 -->
        <div class="cards-container" id="cardsContainer"></div>
    </div>

    <script>
        // 全局变量
        let allCards = []; // 存储所有原始数据
        let currentSort = 'expiry'; // 当前排序方式: 'expiry' | 'balance' | null (默认按过期时间)
        let sortDirection = 'asc'; // 排序方向: 'asc' | 'desc' (默认升序，最早过期的在前)
        let searchKeyword = ''; // 搜索关键词
        let pendingDeleteData = null; // 待删除的数据
        let isRefreshing = false; // 是否正在刷新
        let statusFilter = null; // 状态过滤: null | 'ACTIVE' | 'BANNED'

        // ========== 加载状态管理 ==========
        function showLoading(text = '正在刷新...') {
            const overlay = document.getElementById('loadingOverlay');
            const loadingText = document.getElementById('loadingText');
            if (loadingText) loadingText.textContent = text;
            if (overlay) overlay.classList.add('active');
            document.body.classList.add('no-scroll'); // 禁止滚动
            isRefreshing = true;
        }

        function hideLoading() {
            const overlay = document.getElementById('loadingOverlay');
            if (overlay) overlay.classList.remove('active');
            document.body.classList.remove('no-scroll'); // 恢复滚动
            isRefreshing = false;
        }

        // ========== 确认对话框管理 ==========
        function showConfirmModal(data) {
            pendingDeleteData = data;
            const modal = document.getElementById('confirmModal');
            const modalInfo = document.getElementById('modalInfo');

            // 填充账户信息
            const domain = extractDomain(data.tenantUrl);
            const emailNote = data.emailNote || '未知';

            modalInfo.innerHTML = `
                <div class="modal-info-item">
                    <span class="modal-info-label">邮箱:</span>
                    <span class="modal-info-value">${emailNote}</span>
                </div>
                <div class="modal-info-item">
                    <span class="modal-info-label">域名:</span>
                    <span class="modal-info-value">${domain}</span>
                </div>
            `;

            modal.classList.add('active');
            document.body.classList.add('no-scroll'); // 禁止滚动
        }

        function closeConfirmModal() {
            const modal = document.getElementById('confirmModal');

            // 添加关闭动画
            modal.classList.add('closing');

            // 等待动画完成后再移除active类
            setTimeout(function() {
                modal.classList.remove('active');
                modal.classList.remove('closing');
                document.body.classList.remove('no-scroll'); // 恢复滚动
                pendingDeleteData = null;
            }, 300); // 与CSS transition时间一致
        }

        function confirmDelete() {
            if (pendingDeleteData) {
                closeConfirmModal();
                callJavaWithData('delete', pendingDeleteData);
            }
        }

        // ========== 设置对话框 ==========
        function showSettingsModal() {
            const modal = document.getElementById('settingsModal');
            modal.classList.add('active');
            document.body.classList.add('no-scroll');

            // 加载当前设置
            if (window.javaCall) {
                window.javaCall('loadSettings', '', '');
            }
        }

        function closeSettingsModal() {
            const modal = document.getElementById('settingsModal');

            // 添加关闭动画
            modal.classList.add('closing');

            // 等待动画完成后再移除active类
            setTimeout(function() {
                modal.classList.remove('active');
                modal.classList.remove('closing');
                document.body.classList.remove('no-scroll');
            }, 300); // 与CSS transition时间一致
        }

        function setCountdown(seconds) {
            document.getElementById('countdownInput').value = seconds;
        }

        function saveSettings() {
            const countdownSeconds = parseInt(document.getElementById('countdownInput').value);

            if (isNaN(countdownSeconds) || countdownSeconds < 10 || countdownSeconds > 3600) {
                alert('请输入有效的倒计时时间（10-3600秒）');
                return;
            }

            const settings = {
                countdownSeconds: countdownSeconds
            };

            // 先关闭模态框，等待动画完成后再调用Java
            closeSettingsModal();

            // 等待模态框关闭动画完成（300ms）后再保存设置
            setTimeout(function() {
                if (window.javaCall) {
                    const jsonStr = JSON.stringify(settings);
                    window.javaCall('saveSettings', jsonStr, '');
                }
            }, 350); // 稍微多于动画时间，确保动画完全结束
        }

        // 接收Java传来的设置数据
        function onSettingsLoaded(settings) {
            console.log('📖 收到设置数据:', settings);
            if (settings && settings.countdownSeconds) {
                document.getElementById('countdownInput').value = settings.countdownSeconds;
            }
        }

        // ========== 按钮点击处理 ==========
        function handleDeleteClick(data) {
            showConfirmModal(data);
        }

        function handleRefreshClick(button, data) {
            if (isRefreshing) {
                console.log('⚠️ 正在刷新中，请勿重复点击');
                return;
            }

            button.classList.add('loading');
            showLoading('正在刷新账户...');
            callJavaWithData('refresh', data);
        }

        // ========== 统计卡片点击处理 ==========
        function handleStatCardClick(filter) {
            console.log('📊 点击统计卡片:', filter);

            // 调试：打印所有账户的状态
            console.log('📋 所有账户状态:');
            for (let i = 0; i < allCards.length; i++) {
                const card = allCards[i];
                const status = card.ban_status || card.banStatus;
                const email = card.email_note || card.emailNote;
                console.log('   ' + (i+1) + '. ' + email + ' - 状态: ' + status);
            }

            // 移除所有卡片的active状态
            document.querySelectorAll('.stat-card.clickable').forEach(function(card) {
                card.classList.remove('active');
            });

            // 如果点击的是当前已激活的过滤器，则取消过滤
            if (statusFilter === filter) {
                statusFilter = null;
                console.log('   ✅ 取消过滤，显示所有账户');
            } else {
                // 设置新的过滤器
                if (filter === 'all') {
                    statusFilter = null;
                } else if (filter === 'ACTIVE') {
                    statusFilter = 'ACTIVE';
                } else if (filter === 'BANNED') {
                    statusFilter = 'BANNED';
                }

                // 添加active状态到被点击的卡片
                const clickedCard = document.querySelector('.stat-card[data-filter="' + filter + '"]');
                if (clickedCard && statusFilter !== null) {
                    clickedCard.classList.add('active');
                }

                console.log('   ✅ 设置过滤器:', statusFilter || '全部');
            }

            // 重新渲染卡片
            renderCards();
        }
        let eventListenersInitialized = false; // 标志：事件监听器是否已初始化

        // 接收来自Java的数据
        function loadCards(cardsJson) {
            allCards = JSON.parse(cardsJson);
            const loadingContainer = document.getElementById('loadingContainer');
            const contentWrapper = document.getElementById('contentWrapper');

            // 隐藏加载动画，显示内容
            loadingContainer.classList.add('hidden');
            contentWrapper.style.display = 'block';

            // 隐藏刷新遮罩
            hideLoading();

            // 移除所有按钮的加载状态
            document.querySelectorAll('.action-btn.loading, .sort-btn.loading').forEach(btn => {
                btn.classList.remove('loading');
            });

            // 初始化事件监听器
            initEventListeners();

            // 更新排序按钮状态（因为默认是按过期时间排序）
            updateSortButtons();

            // 更新排序方向按钮
            updateSortDirectionButton();

            // 渲染卡片
            renderCards();

            console.log('✅ 卡片加载完成，共 ' + allCards.length + ' 个账户');
            console.log('📌 默认排序: 按过期时间升序（最早过期的在前）');

            // 暴露测试函数到全局
            window.testSort = function() {
                console.log('🧪 测试排序功能');
                console.log('   当前排序:', currentSort);
                console.log('   排序方向:', sortDirection);

                const expiryBtn = document.getElementById('sortByExpiry');
                const balanceBtn = document.getElementById('sortByBalance');

                console.log('   过期时间按钮:', expiryBtn);
                console.log('   过期时间按钮类名:', expiryBtn ? expiryBtn.className : 'null');
                console.log('   余额按钮:', balanceBtn);
                console.log('   余额按钮类名:', balanceBtn ? balanceBtn.className : 'null');

                // 手动触发排序
                console.log('   手动激活余额排序...');
                currentSort = 'balance';
                updateSortButtons();
            };
        }

        // 初始化事件监听器
        function initEventListeners() {
            // 防止重复绑定事件监听器
            if (eventListenersInitialized) {
                console.log('⚠️ 事件监听器已经初始化过，跳过重复绑定');
                return;
            }

            console.log('🔧 初始化事件监听器...');

            // 搜索框
            const searchInput = document.getElementById('searchInput');
            const clearSearch = document.getElementById('clearSearch');

            searchInput.addEventListener('input', function(e) {
                searchKeyword = e.target.value.toLowerCase().trim();
                updateClearButton();
                renderCards();
            });

            // 清除搜索按钮
            clearSearch.addEventListener('click', function() {
                searchInput.value = '';
                searchKeyword = '';
                updateClearButton();
                renderCards();
            });

            // 排序按钮 - 使用传统函数语法以兼容 JBCefBrowser
            const expiryBtn = document.getElementById('sortByExpiry');
            const balanceBtn = document.getElementById('sortByBalance');
            const directionBtn = document.getElementById('sortDirection');

            console.log('   过期时间按钮:', expiryBtn);
            console.log('   余额按钮:', balanceBtn);
            console.log('   方向按钮:', directionBtn);

            expiryBtn.addEventListener('click', function(e) {
                console.log('🖱️ 点击过期时间按钮, event.target =', e.target);
                console.log('   event.currentTarget =', e.currentTarget);
                toggleSort('expiry');
            });

            balanceBtn.addEventListener('click', function(e) {
                console.log('🖱️ 点击剩余余额按钮, event.target =', e.target);
                console.log('   event.currentTarget =', e.currentTarget);
                toggleSort('balance');
            });

            // 排序方向按钮
            directionBtn.addEventListener('click', function() {
                sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
                updateSortDirectionButton();
                renderCards();
            });

            // 刷新全部按钮
            const refreshAllBtn = document.getElementById('refreshAllBtn');
            refreshAllBtn.addEventListener('click', function() {
                console.log('🔄 点击刷新全部按钮');
                if (isRefreshing) {
                    console.log('⚠️ 正在刷新中，请勿重复点击');
                    return;
                }

                this.classList.add('loading');
                showLoading('正在刷新所有账户...');

                if (window.javaCall) {
                    window.javaCall('refreshAll', '', '');
                } else {
                    console.log('Java bridge not ready');
                    hideLoading();
                    this.classList.remove('loading');
                }
            });

            // 设置按钮
            const settingsBtn = document.getElementById('settingsBtn');
            settingsBtn.addEventListener('click', function() {
                console.log('⚙️ 点击设置按钮');
                showSettingsModal();
            });

            // 标记为已初始化
            eventListenersInitialized = true;
            console.log('✅ 事件监听器初始化完成');
        }

        // 更新清除按钮显示状态
        function updateClearButton() {
            const clearSearch = document.getElementById('clearSearch');
            const searchInput = document.getElementById('searchInput');
            if (searchInput.value.trim()) {
                clearSearch.classList.add('visible');
            } else {
                clearSearch.classList.remove('visible');
            }
        }

        // 切换排序方式
        function toggleSort(sortType) {
            console.log('📌 toggleSort 被调用, sortType =', sortType);
            console.log('   当前 currentSort =', currentSort);

            if (currentSort === sortType) {
                // 如果点击当前激活的排序，则取消排序
                console.log('   ➡️ 取消排序（点击了已激活的按钮）');
                currentSort = null;
            } else {
                console.log('   ➡️ 切换到新排序:', sortType);
                currentSort = sortType;
            }

            console.log('   更新后 currentSort =', currentSort);
            console.log('   准备调用 updateSortButtons()');
            updateSortButtons();
            console.log('   准备调用 renderCards()');
            renderCards();
            console.log('   toggleSort 执行完成');
        }

        // 更新排序按钮状态 - 增强版，兼容 JBCefBrowser
        function updateSortButtons() {
            const expiryBtn = document.getElementById('sortByExpiry');
            const balanceBtn = document.getElementById('sortByBalance');

            console.log('🎨 更新按钮状态, currentSort =', currentSort);

            // 先移除所有 active 类和内联样式
            expiryBtn.className = 'sort-btn';
            balanceBtn.className = 'sort-btn';
            expiryBtn.removeAttribute('style');
            balanceBtn.removeAttribute('style');

            // 强制重绘（触发浏览器重新计算样式）
            void expiryBtn.offsetHeight;
            void balanceBtn.offsetHeight;

            // 根据当前排序设置激活状态
            if (currentSort === 'expiry') {
                expiryBtn.className = 'sort-btn active';
                // 强制设置内联样式以确保在 JBCefBrowser 中生效
                expiryBtn.style.cssText = 'background: #4a90e2 !important; border-color: #4a90e2 !important; color: white !important; box-shadow: 0 2px 4px rgba(74, 144, 226, 0.3) !important;';
                console.log('   ✅ 激活过期时间按钮');
            } else if (currentSort === 'balance') {
                balanceBtn.className = 'sort-btn active';
                // 强制设置内联样式以确保在 JBCefBrowser 中生效
                balanceBtn.style.cssText = 'background: #4a90e2 !important; border-color: #4a90e2 !important; color: white !important; box-shadow: 0 2px 4px rgba(74, 144, 226, 0.3) !important;';
                console.log('   ✅ 激活余额按钮');
            } else {
                console.log('   ❌ 取消所有排序');
            }

            // 再次强制重绘
            void expiryBtn.offsetHeight;
            void balanceBtn.offsetHeight;

            // 验证
            console.log('   过期时间按钮:');
            console.log('     - className:', expiryBtn.className);
            console.log('     - style.background:', expiryBtn.style.background);
            console.log('     - computed style:', window.getComputedStyle(expiryBtn).backgroundColor);
            console.log('   余额按钮:');
            console.log('     - className:', balanceBtn.className);
            console.log('     - style.background:', balanceBtn.style.background);
            console.log('     - computed style:', window.getComputedStyle(balanceBtn).backgroundColor);
        }

        // 更新排序方向按钮
        function updateSortDirectionButton() {
            const btn = document.getElementById('sortDirection');
            const svg = btn.querySelector('svg path');
            if (sortDirection === 'asc') {
                svg.setAttribute('d', 'M7 14l5-5 5 5z'); // 向上箭头
                btn.title = '升序';
            } else {
                svg.setAttribute('d', 'M7 10l5 5 5-5z'); // 向下箭头
                btn.title = '降序';
            }
        }

        // 更新统计数据
        function updateStats(filteredCards) {
            // 计算总账户数
            const totalCount = allCards.length;

            // 计算正常和禁用账户数
            let activeCount = 0;
            let bannedCount = 0;
            let totalBalance = 0;

            for (let i = 0; i < allCards.length; i++) {
                const card = allCards[i];
                const status = card.ban_status || card.banStatus;
                if (status === 'ACTIVE') {
                    activeCount++;
                    // 只累加正常账户的余额
                    const portalInfo = card.portal_info || card.portalInfo || {};
                    const balance = portalInfo.credits_balance || portalInfo.creditsBalance || 0;
                    totalBalance += balance;
                } else {
                    bannedCount++;
                }
            }

            // 当前显示的账户数
            const displayedCount = filteredCards.length;

            // 更新 DOM
            document.getElementById('statTotal').textContent = totalCount;
            document.getElementById('statActive').textContent = activeCount;
            document.getElementById('statBanned').textContent = bannedCount;
            document.getElementById('statBalance').textContent = totalBalance.toLocaleString();
            document.getElementById('statDisplayed').textContent = displayedCount;

            console.log('📊 统计更新: 总数=' + totalCount + ', 正常=' + activeCount + ', 禁用=' + bannedCount + ', 余额=' + totalBalance + '(仅正常账户), 显示=' + displayedCount);
        }

        // 渲染卡片
        function renderCards() {
            let filteredCards = [...allCards];

            console.log('🔍 渲染卡片 | 排序:', currentSort || '无', '| 方向:', sortDirection === 'asc' ? '↑' : '↓', '| 搜索:', searchKeyword || '无', '| 状态过滤:', statusFilter || '无');

            // 1. 状态过滤
            if (statusFilter) {
                console.log('   🔍 开始状态过滤，目标状态:', statusFilter);
                filteredCards = filteredCards.filter(function(card) {
                    const status = card.ban_status || card.banStatus;
                    const email = card.email_note || card.emailNote;
                    let match = false;

                    if (statusFilter === 'ACTIVE') {
                        // 只有状态为 ACTIVE 的才匹配
                        match = status === 'ACTIVE';
                    } else if (statusFilter === 'BANNED') {
                        // 只要不是 ACTIVE 的都算封禁（包括 BANNED、null、undefined 等）
                        match = status !== 'ACTIVE';
                    }

                    console.log('      - ' + email + ': 状态=' + status + ', 匹配=' + match);
                    return match;
                });
                console.log('   ✅ 状态过滤完成: ' + statusFilter + ', 剩余 ' + filteredCards.length + ' 个账户');
            }

            // 2. 搜索过滤
            if (searchKeyword) {
                filteredCards = filteredCards.filter(function(card) {
                    const email = (card.email_note || card.emailNote || '').toLowerCase();
                    return email.includes(searchKeyword);
                });
            }

            // 3. 排序
            if (currentSort === 'expiry') {
                // 排序前记录前3个
                console.log('   排序前（过期时间）:');
                for (let i = 0; i < Math.min(3, filteredCards.length); i++) {
                    const card = filteredCards[i];
                    const portalInfo = card.portal_info || card.portalInfo || {};
                    const expiryDate = portalInfo.expiry_date || portalInfo.expiryDate || '';
                    console.log('     ' + (i+1) + '. ' + (card.email_note || card.emailNote) + ' - ' + expiryDate);
                }

                filteredCards.sort(function(a, b) {
                    const dateA = getExpiryDate(a);
                    const dateB = getExpiryDate(b);
                    return sortDirection === 'asc' ? dateA - dateB : dateB - dateA;
                });

                // 排序后记录前3个
                console.log('   排序后（过期时间）:');
                for (let i = 0; i < Math.min(3, filteredCards.length); i++) {
                    const card = filteredCards[i];
                    const portalInfo = card.portal_info || card.portalInfo || {};
                    const expiryDate = portalInfo.expiry_date || portalInfo.expiryDate || '';
                    console.log('     ' + (i+1) + '. ' + (card.email_note || card.emailNote) + ' - ' + expiryDate);
                }
                console.log('   📅 按过期时间排序完成');
            } else if (currentSort === 'balance') {
                // 排序前记录前3个
                console.log('   排序前（余额）:');
                for (let i = 0; i < Math.min(3, filteredCards.length); i++) {
                    const card = filteredCards[i];
                    const balance = getBalance(card);
                    console.log('     ' + (i+1) + '. ' + (card.email_note || card.emailNote) + ' - 余额: ' + balance);
                }

                filteredCards.sort(function(a, b) {
                    const balanceA = getBalance(a);
                    const balanceB = getBalance(b);
                    return sortDirection === 'asc' ? balanceA - balanceB : balanceB - balanceA;
                });

                // 排序后记录前3个
                console.log('   排序后（余额）:');
                for (let i = 0; i < Math.min(3, filteredCards.length); i++) {
                    const card = filteredCards[i];
                    const balance = getBalance(card);
                    console.log('     ' + (i+1) + '. ' + (card.email_note || card.emailNote) + ' - 余额: ' + balance);
                }
                console.log('   💰 按余额排序完成');
            }

            // 3. 更新统计数据
            updateStats(filteredCards);

            // 4. 渲染
            const container = document.getElementById('cardsContainer');
            container.innerHTML = '';
            filteredCards.forEach(function(card) {
                container.appendChild(createCard(card));
            });

            console.log('   ✅ 显示 ' + filteredCards.length + '/' + allCards.length + ' 个账户');
        }

        // 获取过期时间（用于排序）
        function getExpiryDate(card) {
            const portalInfo = card.portal_info || card.portalInfo || {};
            const expiryDate = portalInfo.expiry_date || portalInfo.expiryDate || '';
            return expiryDate ? new Date(expiryDate).getTime() : 0;
        }

        // 获取余额（用于排序）
        function getBalance(card) {
            const portalInfo = card.portal_info || card.portalInfo || {};
            return portalInfo.credits_balance || portalInfo.creditsBalance || 0;
        }

        function createCard(data) {
            const card = document.createElement('div');
            card.className = 'card';

            // 从tenant_url提取域名
            const domain = extractDomain(data.tenant_url || data.tenantUrl);

            // 状态判断
            const status = data.ban_status === 'ACTIVE' || data.banStatus === 'ACTIVE' ? '正常' : '已禁用';
            const statusClass = status === '正常' ? '' : 'warning';

            // 邮箱
            const email = data.email_note || data.emailNote || '';

            // 过期时间和余额
            const portalInfo = data.portal_info || data.portalInfo || {};
            const balance = portalInfo.credits_balance || portalInfo.creditsBalance || 0;
            const expiryDate = portalInfo.expiry_date || portalInfo.expiryDate || '';
            const expireTime = formatExpiryDate(expiryDate);

            // 更新时间
            const updatedAt = data.updated_at || data.updatedAt || '';
            const time = formatDateTime(updatedAt);

            card.innerHTML = `
                <div class="card-header">
                    <div class="card-title">${domain}</div>
                    <div class="status-badge ${statusClass}">${status}</div>
                </div>
                <div class="card-time">${time}</div>
                <div class="card-email">
                    <svg class="email-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="5" width="18" height="14" rx="2"/>
                        <path d="M3 7l9 6 9-6"/>
                    </svg>
                    <span class="email-text">${email}</span>
                </div>
                <div class="card-info">
                    <div class="expire-badge">过期: ${expireTime}</div>
                    <div class="balance-text">剩余: ${balance}</div>
                </div>
                <div class="card-actions">
                    <button class="action-btn primary" title="使用" onclick='callJavaWithData("open", ${JSON.stringify(data)})'>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                            <polyline points="15 3 21 3 21 9"/>
                            <line x1="10" y1="14" x2="21" y2="3"/>
                        </svg>
                    </button>
                    <button class="action-btn warning" title="刷新" onclick='handleRefreshClick(this, ${JSON.stringify(data)})'>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
                        </svg>
                    </button>
                    <button class="action-btn danger" title="删除" onclick='handleDeleteClick(${JSON.stringify(data)})'>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6"/>
                        </svg>
                    </button>
                </div>
            `;

            return card;
        }

        // 从URL提取域名
        function extractDomain(url) {
            if (!url) return '未知域名';
            try {
                const domain = url.replace(/^https?:\/\//, '').split('/')[0];
                return domain;
            } catch (e) {
                return url;
            }
        }

        // 格式化过期时间 - 显示剩余天数
        function formatExpiryDate(isoDate) {
            if (!isoDate) return '未知';
            try {
                const expiryDate = new Date(isoDate);
                const now = new Date();

                // 计算剩余毫秒数
                const diffMs = expiryDate.getTime() - now.getTime();

                // 如果已过期
                if (diffMs < 0) {
                    const daysAgo = Math.floor(Math.abs(diffMs) / (1000 * 60 * 60 * 24));
                    return `已过期 ${daysAgo} 天`;
                }

                // 计算剩余天数
                const daysLeft = Math.floor(diffMs / (1000 * 60 * 60 * 24));
                const hoursLeft = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

                if (daysLeft > 0) {
                    return `剩余 ${daysLeft} 天`;
                } else if (hoursLeft > 0) {
                    return `剩余 ${hoursLeft} 小时`;
                } else {
                    const minutesLeft = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
                    return `剩余 ${minutesLeft} 分钟`;
                }
            } catch (e) {
                return isoDate;
            }
        }

        // 格式化日期时间
        function formatDateTime(isoDate) {
            if (!isoDate) return '';
            try {
                const date = new Date(isoDate);
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                return `${year}/${month}/${day} ${hours}:${minutes}`;
            } catch (e) {
                return isoDate;
            }
        }

        // 调用Java方法的辅助函数（传递完整JSON数据）
        function callJavaWithData(action, dataObj) {
            if (window.javaCall) {
                // 将整个数据对象序列化为JSON字符串
                const jsonStr = JSON.stringify(dataObj);
                window.javaCall(action, jsonStr, '');
            } else {
                console.log('Java bridge not ready:', action, dataObj);
            }
        }

        // 兼容旧的调用方式
        function callJava(action, domain, param) {
            if (window.javaCall) {
                window.javaCall(action, domain, param || '');
            } else {
                console.log('Java bridge not ready:', action, domain, param);
            }
        }

        // 初始化示例数据
        window.onload = function() {
            const sampleData = [
                {
                    domain: "d9.api.augmentcode.com",
                    status: "正常",
                    time: "2025/11/06 16:23",
                    email: "aug****08@goodsniubi.space",
                    expireTime: "11/12 16:23",
                    balance: "34000"
                },
                {
                    domain: "api.openai.com",
                    status: "正常",
                    time: "2025/11/06 16:23",
                    email: "user****@example.com",
                    expireTime: "11/21 16:23",
                    balance: "15000"
                },
                {
                    domain: "api.anthropic.com",
                    status: "即将过期",
                    time: "2025/11/06 16:23",
                    email: "test****@demo.com",
                    expireTime: "11/08 16:23",
                    balance: "2500"
                },
                {
                    domain: "d20.api.augmentcode.com",
                    status: "正常",
                    time: "2025/11/06 16:23",
                    email: "demo****@test.space",
                    expireTime: "11/26 16:23",
                    balance: "45000"
                }
            ];
            loadCards(JSON.stringify(sampleData));
        };
    </script>
</body>
</html>

